<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Happy Birthday</title>
    <link rel="stylesheet" href="css/fullPage-3.1.2.min.css">
    <link rel="stylesheet" href="css/memories.css">
</head>

<body>
<audio src="music/1.mp3" autoplay="autoplay" loop="loop"></audio>
<div class="bgcolor">
    <div style="z-index:100;" id="dowebok">
        <!--第一屏-->
        <div class="section">
            <div class="ly-box01">
                <div class="ly-txt01">
                    <p class="ly-stxt01">XXXXXXXXXXXXXXXXXXXXXXX</p>
                    <p class="ly-stxt02">XXXXXXXXXXXXXXXXXXXXXXX</p>
                    <p class="ly-stxt03">XXXXXXXXXXXXXXXXXXXXXXX</p>
                    <p class="ly-stxt04">XXXXXXXXXXXXXXXXXXXXXXX</p>
                    <p class="ly-stxt05">XXXXXXXXXXXXXXXXXXXXXXX</p>
                </div>
                <div class="ly-txt02">
                    <p class="ly-stxt06">XXXXXXXXXXXXXXXXXXXXXXX</p>
                    <p class="ly-stxt07">XXXXXXXXXXXXXXXXXXXXXXX</p>
                    <p class="ly-stxt08">XXXXXXXXXXXXXXXXXXXXXXX</p>
                    <p class="ly-stxt09">XXXXXXXXXXXXXXXXXXXXXXX</p>
                    <p class="ly-stxt10">XXXXXXXXXXXXXXXXXXXXXXX</p>
                </div>
            </div>
        </div>

        <!--第二屏-->

        <div class="section">
            <div class="timeline"></div>
            <div class="timepoint11"></div>
            <div class="ly-box11">
                <div class="ly-txt11">
                    201X-1X-1X
                </div>
                <div class="ly-txt12">
                    XXXXXXXXXXXXXXXXXXXX
                </div>
                <div class="ly-imgbox11">
                    <img class="ly-img11" src="img/2014.11.14-1.jpg">
                </div>
            </div>
            <div class="ly-triangle11"></div>

            <div class="ly-box12">
                <div class="ly-txt13">
                    201X-1X-1X
                </div>
                <div class="ly-txt14">
                    <p>XX</p>
                    <p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
                    <p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
                    <p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
                    <p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
                    <p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
                </div>
            </div>
            <div class="ly-triangle12"></div>
        </div>

        <!--第三屏-->

        <div class="section">
            <div class="timeline"></div>
            <div class="timepoint21"></div>
            <div class="ly-box21">
                <div class="ly-txt21">
                    201X-1X-2X
                </div>
                <div class="ly-txt22">
                    <p>XXXXXXXXXXXXXX</p>
                    <p>XXXXXXXXXXXXXX</p>
                </div>
                <div class="ly-imgbox21">
                    <img class="ly-img21" src="img/2014.11.26-1.png">
                </div>
            </div>
            <div class="ly-triangle21"></div>

            <div class="ly-box22">
                <div class="ly-txt23">
                    201X-1X-1X
                </div>
                <div class="ly-txt24">
                    XXXXXXXXXXXXXXXXXX
                </div>
                <div class="ly-imgbox22">
                    <img class="ly-img22" src="img/2014.12.19-1.png">
                </div>
            </div>
            <div class="ly-triangle22"></div>

            <div class="ly-box23">
                <div class="ly-txt25">
                    201X-1X-2X
                </div>
                <div class="ly-txt26">
                    XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
                </div>
                <div class="ly-imgbox23">
                    <img class="ly-img23" src="img/2014.12.20-1.jpg">
                </div>
            </div>
            <div class="ly-triangle23"></div>
        </div>

        <!--第四屏-->

        <div class="section">
            <div class="timeline"></div>
            <div class="timepoint31"></div>
            <div class="ly-box31">
                <div class="ly-txt31">
                    201X-1X-2X
                </div>
                <div class="ly-txt32">
                    <p>XXXXXXXX。</p>
                    <p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
                    <p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
                </div>
                <div class="ly-imgbox31">
                    <img class="ly-img31" src="img/2014.12.28-1.JPG">
                </div>
            </div>
            <div class="ly-triangle31"></div>

            <div class="ly-box32">
                <div class="ly-txt33">
                    201X-1X-2X
                </div>
                <div class="ly-txt34">
                    <p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
                </div>
                <div class="ly-imgbox31">
                    <img class="ly-img31" src="img/2014.12.28-2.png">
                </div>
            </div>
            <div class="ly-triangle32"></div>
        </div>

        <!--第五屏-->
        <div class="section">
            <div class="timeline"></div>
            <div class="timepoint21"></div>
            <div class="ly-box52">
                <div class="ly-txt21">
                    2015-01-01
                </div>
                <div class="ly-txt22">
                    <p> XXXXXXXXXXXXXXXXXXXXXXXX</p>
                    <p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
                </div>
                <div class="ly-imgbox21">
                    <img class="ly-img21" src="img/2015.01.01-1.jpg">
                </div>
            </div>
            <div class="ly-triangle21"></div>

            <div class="ly-box22">
                <div class="ly-txt23">
                    201X-0X-1X
                </div>
                <div class="ly-txt51">
                    <p>XXXXXXXXXXXXXXXXXXXXXXXX</p>
                    <p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
                </div>
                <div class="ly-imgbox22">
                    <img class="ly-img22" src="img/2015.02.19-1.png">
                </div>
            </div>
            <div class="ly-triangle22"></div>

            <div class="ly-box51">
                <div class="ly-txt25">
                    201X-0X-1X
                </div>
                <div class="ly-txt26">
                    <p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
                    <p>XXXXXXXXXXXXXXXXXXX</p>
                    <p>XXXXXXXXXXXXXXXXXXXXXXXX</p>
                    <p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
                </div>
                <div class="ly-imgbox23">
                    <img class="ly-img23" src="img/2015.04.11-1.jpg">
                </div>
            </div>
            <div class="ly-triangle23"></div>
        </div>

        <!--第六屏-->
        <div class="section">
            <div class="timeline"></div>
            <div class="timepoint21"></div>
            <div class="ly-box21">
                <div class="ly-txt21">
                    201X-0X-1X
                </div>
                <div class="ly-txt22">
                    <p>XXXXXXXXXXXXXXXXXX</p>
                    <p>XXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
                    <p>XXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
                </div>
                <div class="ly-imgbox21">
                    <img class="ly-img21" src="img/2015.05.19-1.PNG">
                </div>
            </div>
            <div class="ly-triangle21"></div>

            <div class="ly-box22">
                <div class="ly-txt23">
                    201X-0X-2X
                </div>
                <div class="ly-txt24">
                    <p> XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
                    <p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
                    <p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
                </div>
                <div class="ly-imgbox22">
                    <img class="ly-img22" src="img/2015.05.28-1.PNG">
                </div>
            </div>
            <div class="ly-triangle22"></div>

            <div class="ly-box23">
                <div class="ly-txt25">
                    201X-0X-2X
                </div>
                <div class="ly-txt61">
                    <p class="wwww1">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
                    <p class="wwww1">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
                    <p class="wwww1">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
                    <p class="wwww1">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
                    <p class="wwww1">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
                    <p class="wwww1">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
                    <p class="wwww1">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
                    <p class="wwww1" style="display:none;">你想要的，我能给的，我都会给你。</p>
                </div>
                <div class="ly-imgbox61">
                    <img class="ly-img61" src="img/2015.05.29-1.jpg">
                </div>
            </div>
            <div class="ly-triangle23"></div>
        </div>

        <!--第七屏-->
        <div class="section">
            <div class="timeline"></div>
            <div class="timepoint71"></div>
            <div class="ly-box21 xx71">
                <div class="ly-txt21">
                    201X-0X-3X
                </div>
                <div class="ly-txt22">
                    <p> XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
                </div>
                <div class="ly-imgbox21">
                    <img class="ly-img21" src="img/2015.05.31-1.png">
                </div>
            </div>
            <div class="ly-triangle21 xx72"></div>

            <div class="ly-box71">
                <div class="ly-txt23">
                    201X-0X-0X
                </div>
                <div class="ly-txt71">
                    <p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
                </div>
                <div class="ly-imgbox71">
                    <img class="ly-img71" src="img/2015.06.02-1.jpg">
                </div>
            </div>
            <div class="ly-triangle22"></div>

            <div class="ly-box72">
                <div class="ly-txt25">
                    201X-0X-1X
                </div>
                <div class="ly-txt72">
                    <p>XXXXXXXXXXXXXXXX</p>
                </div>
                <div class="ly-imgbox72">
                    <img class="ly-img72" src="img/2015.06.15-1.jpg">
                </div>
            </div>
            <div class="ly-triangle71"></div>

            <div class="ly-box73">
                <div class="ly-txt25">
                    201X-0X-1X
                </div>
                <div class="ly-txt73">
                    <p>XXXXXXXXXXXXXXXXXXXXX</p>
                </div>
                <div class="ly-imgbox73">
                    <img class="ly-img73" src="img/2015.06.17-1.jpg">
                </div>
            </div>
            <div class="ly-triangle72"></div>
        </div>

        <!--第八屏-->

        <div class="section">
            <div class="timeline"></div>
            <div class="timepoint11"></div>
            <div class="ly-box81">
                <div class="ly-txt11">
                    201X-0X-1X
                </div>
                <div class="ly-txt82">
                    XXXXXXXXXXXXXXXXXXXXXXXXXX
                </div>
                <div class="ly-imgbox81">
                    <img class="ly-img81" src="img/2015.06.18-1.PNG">
                </div>
            </div>
            <div class="ly-triangle11"></div>

            <div class="ly-box82">
                <div class="ly-txt13">
                    2015-06-18
                </div>
                <div class="ly-txt84">
                    <p class="wwww1">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
                    <p class="wwww1">
                        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
                    <p class="wwww1">
                        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
                    <p class="wwww1">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
                    <p class="wwww1">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
                </div>
            </div>
            <div class="ly-triangle82"></div>
        </div>

        <!--第九屏-->

        <div class="section">
            <div class="timeline"></div>
            <div class="timepoint91"></div>
            <div class="ly-box21 xx91">
                <div class="ly-txt21">
                    201X-0X-2X
                </div>
                <div class="ly-txt90">
                    <p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
                </div>
                <div class="ly-imgbox21 xx94">
                    <img class="ly-img21" src="img/2015.06.24-1.jpg">
                </div>
            </div>
            <div class="ly-triangle21 xx92"></div>

            <div class="ly-box91">
                <div class="ly-txt23">
                    201X-0X-2X
                </div>
                <div class="ly-txt91">
                    <p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
                </div>
                <div class="ly-imgbox91">
                    <img class="ly-img91" src="img/2015.06.24-3.jpg">
                </div>
            </div>
            <div class="ly-triangle22 xx92"></div>

            <div class="ly-box92">
                <div class="ly-txt25">
                    201X-0X-2X
                </div>
                <div class="ly-txt92">
                    <p>XXXXXXXXXX</p>
                </div>
                <div class="ly-imgbox92">
                    <img class="ly-img92" src="img/2015.06.26-1.jpg">
                </div>
            </div>
            <div class="ly-triangle91"></div>

            <div class="ly-box93">
                <div class="ly-txt25">
                    201X-0X-2X
                </div>
                <div class="ly-txt93">
                    <p>XXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
                </div>
                <div class="ly-imgbox93">
                    <img class="ly-img93" src="img/2015.06.26-2.jpg">
                </div>
            </div>
            <div class="ly-triangle92"></div>
        </div>
        <!--第十屏-->

        <div class="section">
            <div class="timeline"></div>
            <div class="timepoint11"></div>
            <div class="ly-box81">
                <div class="ly-txt11">
                    201X-0X-0X
                </div>
                <div class="ly-txt82" style="top:8%">
                    <p class="wwww1">XXXXXXXXXXXXXXXXXXX</p>
                    <p class="wwww1">XXXXXXXXXXXXXXXXXXX</p>
                    <p class="wwww1">XXXXXXXXXXXXXXXXXXX</p>
                    <p class="wwww1">XXXXXXXXXXXXXXXXXXX</p>
                    <p class="wwww1">XXXXXXXXXXXXXXXXXXX</p>
                    <p class="wwww1">XXXXXXXXXXXXXXXXXXX</p>
                    <p class="wwww1">XXXXXXXXXXXXXXXXXXX</p>
                </div>
                <div class="ly-imgbox81">
                    <img class="ly-img81" src="img/2016.04.04-1.jpg">
                </div>
            </div>
            <div class="ly-triangle11"></div>

            <div class="ly-box82">
                <div class="ly-txt13">
                    201X-0X-1X
                </div>
                <div class="ly-txt84">
                    <p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
                    <p>
                        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
                    <p>
                        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
                    <p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
                    <p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX。</p>
                    <p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
                    <p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
                    <p>可XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
                    <p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
                    <p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
                    <p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
                    <p>XXXXXXXXXXXXXXXXXXX</p>
                </div>
            </div>
            <div class="ly-triangle82"></div>
        </div>

    </div>
    <!--试验-->
    <ul class="bg-bubbles">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/fullPage-3.1.2.min.js"></script>
<script src="js/diy.js"></script>
</body>
</html>